<!--
 * @Description: 任务详情
 -->
<template>
  <div>
    <div class="taskDetail">
      <div class="taskCard">
        <div class="spaceBetween">
          <div class="name">{{name}}</div>
          <div class="cteateTime">{{createTime}}</div>
        </div>
        <p class="company">{{company}}</p>
        <div class="spaceBetween">
          <div class="money">¥ {{money}}</div>
          <div class="endTime">{{endTime}}截止任务报名</div>
        </div>
      </div>
      <p class="title">任务详情</p>
      <p class="companyInfo" v-if="adress">公司地址：{{adress}}</p>
      <p class="companyInfo" v-if="phone">公司电话：{{phone}}</p>
      <p class="companyInfo" v-if="accountName">联系人：{{accountName}}</p>
      <p class="companyInfo" v-if="instru">描述：{{instru}}</p>
    </div>
    <div class="btnArea" v-if="rollkey === 2 && !apply">
      <van-button type="info" block size="small" @click="$router.push({name: 'fillInfo', query: {id: taskNo}})">申请</van-button>
    </div>
  </div>
</template>

<script>
import { getTaskDetail } from '@/api/check'
import moment from 'moment'
export default {
  data () {
    return {
      rollkey: parseInt(localStorage.getItem('ROLLKEY')),
      name: '',
      createTime: '',
      endTime: '',
      company: '',
      money: '',
      phone: '',
      instru: '',
      adress: '',
      accountName: '',
      apply: false
    }
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created () {
    const taskNo = this.$route.query.id
    this.apply = this.$route.query.apply
    this.taskNo = taskNo
    getTaskDetail(taskNo).then(res => {
      console.log('getTaskDetail', res)
      if (res.data.code === 10000) {
        const data = res.data.data
        const addressAndPhone = data.company.mailInfo.addressAndPhone
        this.adress = addressAndPhone.split(' ')[0]
        this.phone = addressAndPhone.split(' ')[1]
        this.name = data.taskName
        this.createTime = moment(data.createTime).format('YYYY-MM-DD')
        this.endTime = moment(data.createTime).add(3, 'days').format('YYYY-MM-DD')
        this.company = data.company.companyName
        this.money = data.taskMoney
        this.instru = data.taskDesc
        this.accountName = data.company.mailInfo.recipientName
      }
    })
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted () {

  }
}
</script>
<style scoped>
/* @import url(); 引入css类 */
.taskDetail{
  width: 95%;
  margin: 0 auto;
}
.taskCard{
  padding: 15px;
  background: #ffffff;
  border-radius: 5px;
  margin: 12px auto;
  box-shadow: 0px 2px 6px #00000066;
}
.name{
  color: #101010;
  font-size: 16px;
}
.cteateTime{
  color: #8e8e93;
  font-size: 14px;
}
.company{
  color: #101010;
  font-size: 12px;
}
.money{
  color: #007aff;
  font-size: 16px;
}
.endTime{
  color: #8e8e93;
  font-size: 12px;
}
.title{
  font-size: 16px;
  line-height: 35px;
  border-bottom: 1px solid #d7d7d7;
  margin: 10px 0;
}
.companyInfo{
  margin: 8px 0 0 0;
  font-size: 14px;
  word-wrap:break-word
}
</style>
